<template>
    <div class="page-infinite-wrapper" :style="{ height: wrapperHeight + 'px' }" @touchstart="hideDrop">
        <div class="yousport-PerRanking" v-infinite-scroll="loadMore" infinite-scroll-immediate-check="false" infinite-scroll-disabled="isFinished" infinite-scroll-distance="10">

            <div class="page-navbar">

                <ysNavbar @changePer = 'changePer' @changeTeam = 'changeTeam' :hasDept="hasDept"></ysNavbar>

                <div v-show="isPerson">

                    <div class="yousport-rangkingImg" :class="{'yousport-frontcover-default':!firstPerBg.backgroundImage}" :style="firstPerBg">

                        <Avatar :avatar="firstPerIcon" :name="firstPerName" className="top-name"></Avatar>

                        <span class="perTitle">{{firstPerName}}占领了封面</span>
                        <span class="yousport-cover-tip" v-if="!firstPerBg.backgroundImage">暂未上传封面</span>
                    </div>

                    <div class="page-infinite-listitem flex-layout per" @click="goMyHomePage">
                        <div class="ranking"></div>
                        <img class="per-icon" :src="meIcon">
                        <div class="person-info flex">
                            <div class="name">{{meName}}</div>
                            <div class="depName" v-if="isRanking">第{{meRank}}名</div>
                        </div>
                        
                        <span class="walking-number flex">{{meStep}}</span>
                        <div class="like" @click.stop="goPraiseListPage">
                            <span>{{meLike}}</span>
                           <div> <i class="iconfont icon-heart"></i></div>
                        </div>
                    </div>
                    <div class="yousport-ranking-invite" v-if="!hideInviteBox">还有{{unInviteTotal}}个同事没参与<a href="#invite">邀请他们<span class="arrow">&gt;</span></a></div>
                    <ysPersoncell class="yousport-percell" ref="personcell" :perUrl="perListUrl" :date="date" :isShow="isPerson"></ysPersoncell>
                </div>

               <div v-show="isTeam">
                   <div class="yousport-rangkingImg teamImg"  :style="firstTeamBg" :class="{'yousport-frontcover-default':!firstTeamBg.backgroundImage}">
                       <span class="perTitle teamTitle">{{firstTeamName}}<br>占领了封面</span>
                       <span class="yousport-cover-tip" v-if="!firstTeamBg.backgroundImage">暂未上传封面</span>
                   </div>

                   <div class="team-average"><span>部门平均步数</span></div>

                   <ysTeamcell :teamUrl="teamListUrl" :isShow="isTeam" :date="date"></ysTeamcell>
               </div>

            </div>

        </div>
        <div class="drop-down" v-if="dropShow">
            <ul @click="nav" @touchstart.stop="">
                <li data-path="/selectView">历史排行榜</li>
                <li data-path="/questionList">常见问题</li>
                <!-- <li>分享</li> -->
                <li data-path="/setting">设置</li>
            </ul>
        </div>

    </div>
</template>

<script>
    import ysPersoncell from '../component/ys-personcell.vue'
    import ysTeamcell from '../component/ys-teamcell.vue'
    import ysNavbar from '../component/ys-navbar.vue'
    import config from '../assets/config.js'
    import { MessageBox, Indicator } from 'mint-ui';
    import bridge from '../bridge'
    import util from '../assets/util'
    import Avatar from '../component/ys-avatar.vue'

    export default {

        data() {
            return {
                perListUrl:config.host + config.perListUrl,
                meUrl:config.host + config.meUrl,
                teamListUrl:config.host + config.teamListUrl,
                isPersonFinished:false,
                isTeamFinished:false,
                unInviteTotal: 0,
                hideInviteBox: false,
                meRank:'',
                meName:'',
                meIcon:'',
                meStep:'',
                meLike:'',
                firstPerName:'',
                firstPerIcon:'',
                firstPerBg:{
                    backgroundImage:''
                },
                firstTeamName:'',
                firstTeamBg:{
                    backgroundImage:''
                },
                isRanking: true,
                isFinished:false,
                isPerson:true,
                isTeam:false,
                dropShow:false,
                myRowData:[],
                hasDept:util.session.get('sport-has-dept'),
                date:util.session.get('data-current-date')
            };
        },
        activated(){
            this.initHeader();
            this.resumeScroll();
            this.isRanking = this.$root.isRanking;
        },
        created() {
            this.isRanking = !!this.$parent.common.isRanking;
            // 为了解决andorid JS Bridge 回归产生的问题
            setTimeout(()=>{
                this.getStep();
            }, 100);
            this.setFirstPer();
            this.setFirstTeam();
            this.setMeData();
            this.getUnInviteTotal();

        },

        mounted() {
            let me = this;
            this.wrapperHeight = document.documentElement.clientHeight;
            this.$eventBus.$on('loadComplete:person', function () {
                me.isPersonFinished = true;
            });
            this.$eventBus.$on('loadComplete:team', function () {
                me.isTeamFinished = true;
            });
        },
        beforeRouteLeave(to, from, next){
            var scrollTop = document.querySelector('.page-infinite-wrapper').scrollTop;
            util.session.set('personal-rank-scroll', scrollTop);
            next();
        },
        methods:{
            getUnInviteTotal(){
              const url = config.host + config.inviteSearch + '&page=1&size=1';
              this.$http.get(url).then((res)=>{
                if(res.data.code === 0){
                  this.unInviteTotal = res.data.data.total;
                } else {
                  this.hideInviteBox = true;
                }
              }).catch(()=>{
                this.hideInviteBox = true;
              });
            },
            resumeScroll() {
                var scrollTop = util.session.get('personal-rank-scroll');
                if(scrollTop) {
                    document.querySelector('.page-infinite-wrapper').scrollTop = scrollTop;
                }

            },
            loadMore() {
                if(this.isPerson && !this.isPersonFinished) {
                    this.$eventBus.$emit('loadMore:person');
                } else if(this.isTeam && !this.isTeamFinished) {
                    this.$eventBus.$emit('loadMore:team');
                }

            },
            getStep() {
                let me = this;
                let uuid = util.storage.get('sport-uuid');
                bridge.ready(function () {
                    bridge.client.getStepCount(function (d) {
                        var data = (typeof d.data === 'string') ? d.data : JSON.stringify(d.data);

                        if(d.error_code == 0) {
                            me.$http.post(config.host + config.uploadData, {
                                deviceId:uuid,
                                data:data
                            }).then((res)=> {
                                if(!res.data.error_code)  {
                                me.setMeData();
                                me.$refs.personcell.init();
                            }

                        }).catch((res)=>{

                            })
                        } else if(d.error_code == 1) {
                            MessageBox({
                                title:'',
                                message: '对不起您手机内部没有记步功能 步数计算可能存在偏差哦～',
                                confirmButtonText:'知道啦'
                            });

                        } else if(d.error_code == 2){
                            MessageBox({
                                title:'',
                                message: '对不起您手机没有开启计步权限',
                                confirmButtonText:'知道啦'
                            });
                        } else {

                        }


                    }, {
                        days:7
                    })
                })



            },
            hideDrop() {
                this.dropShow = false;
            },
            initHeader() {
                let me = this;
                bridge.ready(function () {
                    bridge.register({
                        goSelect:function () {
                            me.dropShow = !me.dropShow;
                            //me.$router.push('/selectView')
                        }
                    });
                    bridge.client.configNavBar(function () {
                    }, {'hide': 0, 'fullScreen':0, centerItems:[{title:'友运动'}],rightItems:[{title:'更多',callback:'goSelect'}]});
                });

            },

            setFirstPer(){
                this.$eventBus.$on('firstPer',  (data) => {
                    this.firstPerName = data.name;
                    if(data.frontCover) {
                      this.firstPerBg = {
                          backgroundImage:'url('+ data.frontCover +')'

                      };
                    }

                    this.firstPerIcon = data.avatar;
                });
            },
            setFirstTeam(){
                this.$eventBus.$on('firstTeam', (data) => {
                    this.firstTeamName = data.name;
                    if(data.frontCover) {
                      this.firstTeamBg = {
                          backgroundImage:'url('+ data.frontCover +')'
                      }
                    }

                });
            },
            nav(e) {
                this.dropShow = false;
                let path = e.target.dataset.path;
                this.$router.push(path);
            },
            setMeData(){
                this.$http.get(this.meUrl, {
                    params:{
                        date:this.date
                    }

                }).then((res)=>{
                    let meData = res.data;
                    this.meRank = meData.rowno;
                    this.meName = meData.name;
                    this.meIcon = meData.avatar;
                    this.meStep = meData.stepCount;
                    this.meLike = meData.upVote > 9999 ? '9999+' : meData.upVote;
                    this.myRowData = meData;
                    this.myRowData.rank = meData.rowno;

                }).catch((res)=>{
                });
            },

            changePer(){
                if(this.isPerson === true) {
                    return;
                }else {

                    this.isPerson = !this.isPerson;
                    this.isTeam = !this.isTeam;
                }
            },
            changeTeam(){
                if(this.isTeam === true) {
                    return;
                }else {

                    this.isPerson = !this.isPerson;
                    this.isTeam = !this.isTeam;
                }
            },

            goPraiseListPage(){
                util.session.set('praise-row-data',this.myRowData);
                this.$router.push({path:'/praiseList'});
            },
            goMyHomePage(){
                util.session.set('rowData',this.myRowData);
                this.$router.push({path:'/myHomePage'});
            }
        },
        components:{
            ysPersoncell , ysTeamcell , ysNavbar,
            Avatar
        }
    };
</script>

<style lang="less">
    
    .yousport-PerRanking .yousport-rangkingImg{
        position: relative;
        width: 100%;
        height: 200px;
        text-align: center;
        background-size: cover;
        background-color: #4E4E4E;
        background-position: center 60%;
    }
    .yousport-cover-tip {
        position: absolute;
        right: 15px;
        bottom: 15px;
        color: #9E9E9E;
    }
    .yousport-ranking-invite {
      height: 40px;
      line-height: 40px;
      margin-bottom: -10px;
      color: #9E9E9E;
      padding: 0 12px;
      font-size: 13px;
      background: #f5f5f5;
    }
    .yousport-ranking-invite a{
      float: right;
      color: #29B6F6;
      text-decoration: none;
    }
    .yousport-ranking-invite a span{
      margin-left: 10px;
    }
    .yousport-PerRanking  .title-icon{
        display: inline-block;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        margin-bottom: -8px;
    }
    .yousport-PerRanking .teamImg{
        background-size:cover;
    }
    .yousport-PerRanking .perTitle{
        display: inline-block;
        margin-top: 18px;
        margin-left: 4px;
        font-size: 14px;
        color: #FEFEFE;
    }
    .yousport-PerRanking .teamTitle{
        width: 180px;
    }
    .per {
        background: #fff;
    }
    .yousport-PerRanking .yousport-percell{
        margin-top: 10px;
        background: #fff;
    }

    .yousport-PerRanking .page-infinite-listitem{
        display: -webkit-box;
        display:flex;
        -webkit-align-items:center;
        align-items:center;
        height: 58px;
        border-bottom: solid 1px #eee;
        text-align: center;
        list-style-type: none;
    }
    .yousport-PerRanking .page-infinite-list li:first-child{
        border-top: solid 1px #eee;
    }
    .per .ranking{
        width: 22px;
        height: 22px;
        margin-left: 11px;
        color: #262626;
    }
    .per .per-icon{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-left: 20px;
    }
    .per .like{
        display: inline-block;
        margin-left: 12px;
        width: 70px;
        height:58px;
        color: #CCCCCC;
        padding-top:15px;
    }

    .per .like span{

        font-size: 12px;
        text-align: left;
    }
    .per .iconfont{
        font-size: 16px;
    }
    .per .name{
        color: #262626;
        width: 48px;
        text-align: left;
    }
    .per .walking-number{

        font-size: 21px;
        text-align: right;
    }
    .top-name {
        display: inline-block;
        vertical-align: middle;
    }
    .flex-layout {
        display: -webkit-box;
        display: flex;
    }
    .flex {
        display: block !important;
        -webkit-box-flex: 1;
        flex:1;
        width: 0 !important;
    }
    .yousport-PerRanking .team-average{
        margin-left: 12px;
        line-height: 30px;
        height: 30px;
        font-size: 13px;
        color: #9E9E9E;
        background-color: #F5F5F5;
    }

    .mint-msgbox-message {
        font-size: 15px;
        color: #262626;
    }
    .mint-msgbox-btn{
        color: #29B6F6;
        font-size: 15px;
    }
    .drop-down {
        position: fixed;
        top:10px;
        right:10px;
        width:130px;
        color:#ccc;
        list-style:none;
        font-size:15px;
        text-align:center;
        margin:0;
        padding:0;
        border-radius:5px;
        background: #000;
        li {
            height:45px;
            line-height: 45px;
            list-style-type: none;
            &.active {
                background: #272727;
                color:#3abcf7;
             }
        }
        &:before {
            position: absolute;
            top:-5px;
            right:10px;
            content:'';
            border-bottom:8px solid #000;
            border-left:8px solid transparent;
            border-right: 8px solid transparent;
            border-top:none;

         }
    }
</style>
